<template>
  <div>
    <div class="Training_hade">
      <div class="Training_top">
        <img :src="Training_back" alt="" @click="goback" />
        <span>课程大纲</span>
      </div>
    </div>
    <div class="Training_body">
      <div class="Training_title">
        <span>已开课 0 节</span>
        <span>课程有效期:{{ Training_date }}</span>
      </div>
      <div class="Training_cls" v-for="item in trainlist" :key="item.id">
        <!-- <div v-for="(item, index) in swperlist" :key="item"> -->
        <div>
          <img :src="item.img" alt="" />
          <div class="Training_cls_right">
            <p>{{ item.title }}</p>
            <span>{{ item.des }}</span>
            <em>{{ item.class }}</em>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//import growing_list_medal from "../assets/images/GrowingImages/详情-徽章.png"
import Training_back from "../assets/images/Training/训练营-回退.png";
import Training_cls from "../assets/images/Training/训练营-课程封面.png";
import { useStore } from "vuex";
import { computed } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";
export default {
  // 组件注册
  components: {},
  /*   data() {
    return {
    };
  }, */
  setup() {
    // goback
    const router = useRouter();
    const goback = () => {
      router.go(-1);
    };
    //
    const store = useStore();
    const trainlist = computed(() => {
      return store.state.train.trainlist;
    });
    onMounted(() => {
      // console.log(trainlist);
      store.dispatch("gettrainAsync");
    });
    return {
      trainlist,
      Training_number: 5,
      Training_date: `2107-07-01`,
      Training_cls_name: "Sad Panda",
      Training_cls_next_name: "遇见熊猫",
      Training_cls_new: "未上课",
      Training_back,
      Training_cls,
      goback,
    };
  },
};
</script>
<style lang="less" scoped>
.Training_hade {
  width: 100%;
  height: 192px;
  background: url("../assets/images/Training/训练营-顶部.png");
  padding-top: 36px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .Training_top {
    width: 90%;
    height: 30px;
    margin: 0 auto;
    span {
      border-radius: 2px;
      display: block;
      float: right;
      border: 2px solid white;
      font-size: 12px;
      color: white;
      text-align: center;
      padding: 1px;
    }
    img {
      display: block;
      float: left;
    }
  }
}
.Training_body {
  padding-left: 15px;
  padding-right: 15px;
}
.Training_title {
  margin-top: 13px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 40px;
  span {
    font-size: 12px;
    border-radius: 2px;
    background: rgba(58, 58, 58, 0.1);
    padding: 3px 10px;
  }
}
.Training_cls {
  margin-top: 10px;
  > div {
    border-bottom: 2px dotted black;
    overflow: hidden;
    padding-bottom: 15px;
  }
  img {
    display: block;
    float: left;
    margin-right: 13px;
    width: 137px;
    height: 85px;
  }
  .Training_cls_right {
    width: 180px;
    float: left;
    p {
      overflow: hidden;
      font-size: 20px;
    }
    span {
      display: block;
      font-size: 16px;
      margin-bottom: 12px;
      color: rgba(158, 53, 53, 0.4);
    }
    em {
      display: block;
      font-size: 14px;
    }
  }
}
</style>
